import React, { FC, memo, ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { ItemV1Wrapper } from './style'
import { useAppDispatch } from '@/store'
import { generateList } from '@/utils/combine-song'
import { formatCount, getImageSize } from '@/utils/format'
import { getSheetList, getSongUrl } from '@/views/player/service/player'
import { playNewSongListAction } from '@/views/player/store/player'

interface IProps {
  children?: ReactNode
  info: any
}

const SectionItemV1: FC<IProps> = (props: IProps) => {
  const { info } = props
  const dispatch = useAppDispatch()
  function onPlaySongList(id: number) {
    getSheetList(id).then((res: any) => {
      const tracks = res.playlist.tracks.map((track: any) => track.id).join(',')
      getSongUrl(tracks).then((resp: any) => {
        const playSongList = generateList(res.playlist.tracks, resp.data)
        dispatch(playNewSongListAction(playSongList))
      })
    })
  }
  return (
    <ItemV1Wrapper>
      <div className="cover-top">
        <img src={getImageSize(info.picUrl, 140, 140)} alt="IMG" />
        <div className="cover sprite_cover">
          <div className="info sprite_cover">
            <span>
              <i className="sprite_icon headset"></i>
              {formatCount(info.playCount)}
            </span>
            <i
              className="sprite_icon play"
              onClick={() => onPlaySongList(info.id)}
            ></i>
          </div>
        </div>
      </div>
      <div className="cover-bottom text-nowrap">
        <Link to="/discover/songs">{info.name}</Link>
      </div>
    </ItemV1Wrapper>
  )
}

export default memo(SectionItemV1)
